<template>
  <div class="home" id="home" name="home">
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel height="460px" :interval="4000" arrow="always">
        <el-carousel-item v-for="item in carousel" :key="item.carousel_id">
          <router-link
            :to="{
              path: '/goods/details',
              query: { productID: item.product_id },
            }"
            class="carousel-link"
          >
            <img
              :src="
                item.imgPath.includes('http:')
                  ? item.imgPath
                  : $target + item.imgPath
              "
              :alt="item.describes"
              class="carousel-img"
            />
          </router-link>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 轮播图END -->

    <div class="main-box">
      <div class="main">
        <!-- 小说商品展示区域 -->
        <section class="product-section">
          <div class="box-hd">
            <div class="title">小说</div>
            <div class="more">
              <router-link to="/goods?category=小说">查看更多 ></router-link>
            </div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <router-link to="/goods?category=小说" class="promo-card novel">
                <div class="promo-icon-wrapper">
                  <i class="el-icon-reading main-icon"></i>
                  <i class="el-icon-star-on tag-icon"></i>
                </div>
                <div class="promo-content">
                  <h3>精品小说推荐</h3>
                  <p>都市言情 · 推理悬疑 · 科幻奇幻</p>
                </div>
              </router-link>
            </div>
            <div class="list">
              <MyList :list="novelList" :isMore="true"></MyList>
            </div>
          </div>
        </section>
        <!-- 小说商品展示区域END -->

        <!-- 文学商品展示区域 -->
        <section class="product-section">
          <div class="box-hd">
            <div class="title">文学</div>
            <div class="more">
              <MyMenu :val="3" @fromChild="getChildMsg">
                <span slot="1">热门</span>
                <span slot="2">名著</span>
                <span slot="3">现代文学</span>
              </MyMenu>
            </div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul class="promo-ul">
                <li>
                  <button
                    @click="goToSearch('名著')"
                    class="promo-card literature"
                  >
                    <div class="promo-icon-wrapper">
                      <i class="el-icon-notebook-2 main-icon"></i>
                      <i class="el-icon-medal tag-icon"></i>
                    </div>
                    <div class="promo-content">
                      <h3>名著经典</h3>
                      <p>传世经典 · 文学瑰宝</p>
                    </div>
                  </button>
                </li>
                <li>
                  <button
                    @click="goToSearch('现代文学')"
                    class="promo-card literature"
                  >
                    <div class="promo-icon-wrapper">
                      <i class="el-icon-document main-icon"></i>
                      <i class="el-icon-edit-outline tag-icon"></i>
                    </div>
                    <div class="promo-content">
                      <h3>现代文学</h3>
                      <p>当代佳作 · 文学新声</p>
                    </div>
                  </button>
                </li>
              </ul>
            </div>
            <div class="list">
              <MyList :list="literatureList" :isMore="true"></MyList>
            </div>
          </div>
        </section>
        <!-- 文学商品展示区域END -->

        <!-- 教育商品展示区域 -->
        <section class="product-section">
          <div class="box-hd">
            <div class="title">教育</div>
            <div class="more">
              <MyMenu :val="3" @fromChild="getChildMsg2">
                <span slot="1">热门</span>
                <span slot="2">教材</span>
                <span slot="3">工具书</span>
              </MyMenu>
            </div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul class="promo-ul">
                <li>
                  <button
                    @click="goToSearch('教材')"
                    class="promo-card education"
                  >
                    <div class="promo-icon-wrapper">
                      <i class="el-icon-notebook-1 main-icon"></i>
                      <i class="el-icon-trophy tag-icon"></i>
                    </div>
                    <div class="promo-content">
                      <h3>精品教材</h3>
                      <p>权威教材 · 学习必备</p>
                    </div>
                  </button>
                </li>
                <li>
                  <button
                    @click="goToSearch('工具书')"
                    class="promo-card education"
                  >
                    <div class="promo-icon-wrapper">
                      <i class="el-icon-collection main-icon"></i>
                      <i class="el-icon-tools tag-icon"></i>
                    </div>
                    <div class="promo-content">
                      <h3>实用工具书</h3>
                      <p>学习助手 · 知识宝库</p>
                    </div>
                  </button>
                </li>
              </ul>
            </div>
            <div class="list">
              <MyList :list="educationList" :isMore="true"></MyList>
            </div>
          </div>
        </section>
        <!-- 教育商品展示区域END -->

        <!-- 推荐商品展示区域 -->
        <RecommendList></RecommendList>
        <!-- 推荐商品展示区域END -->
      </div>
    </div>
  </div>
</template>
<script>
import RecommendList from "@/components/RecommendList.vue";
export default {
  components: {
    RecommendList,
  },
  data() {
    return {
      carousel: "", // 轮播图数据

      novelList: "", // 小说商品列表
      classicBooksList: "", // 名著商品列表
      literatureList: "", // 文学商品列表
      literatureHotList: "", //热门文学商品列表
      modernLiteratureList: "", //现代文学商品列表

      educationList: "", //教育商品列表
      educationHotList: "", //热门教育商品列表
      textbookList: "", // 教材商品列表
      toolbookList: "", //工具书商品列表

      literatureActive: 1, // 文学当前选中的商品分类
      educationActive: 1, // 教育当前选中的商品分类
    };
  },
  watch: {
    // 文学当前选中的商品分类，响应不同的商品数据
    literatureActive: function (val) {
      // 页面初始化的时候把literatureHotList(热门文学商品列表)直接赋值给literatureList(文学商品列表)
      // 所以在切换商品列表时判断literatureHotList是否为空,为空则是第一次切换,把literatureList赋值给literatureHotList
      if (this.literatureHotList == "") {
        this.literatureHotList = this.literatureList;
      }
      if (val == 1) {
        // 1为热门文学商品
        this.literatureList = this.literatureHotList;
        return;
      }
      if (val == 2) {
        // 2为名著商品
        this.literatureList = this.classicBooksList;
        return;
      }
      if (val == 3) {
        // 3为现代文学商品
        this.literatureList = this.modernLiteratureList;
        return;
      }
    },
    educationActive: function (val) {
      // 页面初始化的时候把educationHotList(热门教育商品列表)直接赋值给educationList(教育商品列表)
      // 所以在切换商品列表时判断educationHotList是否为空,为空则是第一次切换,把educationList赋值给educationHotList
      if (this.educationHotList == "") {
        this.educationHotList = this.educationList;
      }
      if (val == 1) {
        // 1为热门教育商品
        this.educationList = this.educationHotList;
        return;
      }
      if (val == 2) {
        // 2为教材商品
        this.educationList = this.textbookList;
        return;
      }
      if (val == 3) {
        //3 为工具书商品
        this.educationList = this.toolbookList;
        return;
      }
    },
  },
  created() {
    // 获取轮播图数据
    this.$axios
      .post("/api/carousel/list", {})
      .then((res) => {
        this.carousel = res.data.data;
      })
      .catch((err) => {
        return Promise.reject(err);
      });

    // 获取各类商品数据
    this.getPromo("小说", "novelList");

    this.getPromo("名著", "classicBooksList");
    this.getPromo("现代文学", "modernLiteratureList");

    this.getPromo("教材", "textbookList");
    this.getPromo("工具书", "toolbookList");

    this.getPromo(
      ["文学", "名著", "现代文学"],
      "literatureList",
      "/api/product/hots"
    );
    this.getPromo(
      ["教育", "教材", "工具书"],
      "educationList",
      "/api/product/hots"
    );
  },
  methods: {
    // 获取文学模块子组件传过来的数据
    getChildMsg(val) {
      this.literatureActive = val;
    },
    // 获取教育模块子组件传过来的数据
    getChildMsg2(val) {
      this.educationActive = val;
    },
    // 获取各类商品数据方法封装
    getPromo(categoryName, val, api) {
      api = api != undefined ? api : "/api/product/promo";
      this.$axios
        .post(api, {
          categoryName,
        })
        .then((res) => {
          this[val] = res.data.data;
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },
    // 通用跳转方法
    goToSearch(category) {
      this.$router.push({ path: "/goods", query: { search: category } });
    },
  },
};
</script>
<style scoped>
@import "../assets/css/index.css";
@import "../assets/css/promo-cards.css";

/* 修复示意图和商品卡片大小不一致的问题 */
.promo-list {
  flex: 0 0 234px;
  margin-right: 15px;
}

/* 小说示意卡片样式 */
.promo-card.novel {
  height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px; /* 添加底部间距，避免与商品重叠 */
}

/* 文学和教育示意卡片样式 */
.promo-ul {
  display: flex;
  flex-direction: column;
  gap: 15px; /* 与商品卡片间距一致 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.promo-ul li {
  flex: 1;
  margin: 0;
}

.promo-card.literature,
.promo-card.education {
  height: 132.5px; /* 280px的一半减去间距 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.promo-icon-wrapper {
  margin-bottom: 10px;
}

.main-icon {
  font-size: 36px;
  padding: 15px;
}

.tag-icon {
  font-size: 20px;
  padding: 6px;
}

.promo-content h3 {
  font-size: 16px;
  margin-bottom: 5px;
}

.promo-content p {
  font-size: 12px;
}

.box-bd {
  display: flex;
  gap: 15px;
}

.list {
  flex: 1;
  min-width: 0;
}

@media screen and (max-width: 992px) {
  .box-bd {
    flex-direction: column;
  }

  .promo-list {
    flex: none;
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }

  .promo-ul {
    flex-direction: row;
    gap: 15px;
  }

  .promo-card.novel {
    height: 240px;
  }

  .promo-card.literature,
  .promo-card.education {
    height: 240px;
  }

  .main-icon {
    font-size: 32px;
    padding: 12px;
  }

  .tag-icon {
    font-size: 18px;
    padding: 5px;
  }
}

@media screen and (max-width: 576px) {
  .promo-ul {
    flex-direction: column;
  }

  .promo-card.novel,
  .promo-card.literature,
  .promo-card.education {
    height: 200px;
  }

  .main-icon {
    font-size: 28px;
    padding: 10px;
  }

  .tag-icon {
    font-size: 16px;
    padding: 4px;
  }

  .promo-content h3 {
    font-size: 14px;
  }

  .promo-content p {
    font-size: 10px;
  }
}
</style>